<template>
  <el-container>
    <el-header>
      <h1>订单管理</h1>
    </el-header>
    <el-main>
      <el-table :data="orders" style="width: 100%">
        <el-table-column
          prop="orderNumber"
          label="订单号"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="movieName"
          label="电影名称"
          width="180"
        ></el-table-column>
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="time" label="时间" width="180"></el-table-column>
        <el-table-column
          prop="seats"
          label="座位"
          width="180"
        ></el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button type="text" @click="openDetailDialog(scope.row)"
              >查看详情</el-button
            >
            <el-button type="text" @click="deleteOrder(scope.row)"
              >删除订单</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="orders.length"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </el-main>
    <el-dialog
      :visible="detailDialogVisible"
      @update:visible="detailDialogVisible = $event"
      title="订单详情"
    >
      <div>
        <p>订单号：{{ selectedOrder.orderNumber }}</p>
        <p>电影名称：{{ selectedOrder.movieName }}</p>
        <p>日期：{{ selectedOrder.date }}</p>
        <p>时间：{{ selectedOrder.time }}</p>
        <p>座位：{{ selectedOrder.seats }}</p>
      </div>
      <div class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import { timeSelectProps } from "element-plus";

export default {
  data() {
    return {
      orders: [], // 订单数据
      currentPage: 1,
      pageSize: 10,
      detailDialogVisible: false,
      selectedOrder: {},
    };
  },
  methods: {
    openDetailDialog(order) {
      this.selectedOrder = order;
      this.detailDialogVisible = true;
    },
    closeDetailDialog() {
      this.detailDialogVisible = false;
    },
    deleteOrder(order) {
      // 删除订单逻辑
      const index = this.orders.findIndex(
        (item) => item.orderNumber === order.orderNumber
      );
      if (index !== -1) {
        this.orders.splice(index, 1);
      }
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
    },
    generateOrderNumber() {
      // 生成10位数的订单号
      let number = "";
      do {
        number = Math.random().toString(36).substring(2, 12);
      } while (this.orders.some((order) => order.orderNumber === number));
      return number;
    },
  },
  created() {
    // 从路由的查询参数中获取电影数据
    const orderData = this.$route.query;
    // 如果是从路由跳转过来的，确保查询参数是正确的
    this.selectedOrder = {
      movieName: orderData.movieTitle,
      date: orderData.orderDate,
      time: orderData.orderTime,
      seats: orderData.orderSeat,
    };
    console.log(this.selectedOrder);

    // 生成订单号并添加到数据中
    this.orders.push({
      ...this.selectedOrder,
      orderNumber: this.generateOrderNumber(),
    });
  },
};
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  text-align: center;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}

.dialog-footer {
  text-align: right;
  padding-top: 20px;
}
</style>
